---
title: Message Format
description: Plugins - Message Format | Transloco Angular i18n
---

Transpiler for `@ngneat/transloco` that uses `@messageformat/core` to compile translations using ICU syntax for handling pluralization and gender.

Messageformat is a mechanism for handling both pluralization and gender in your app.

You can see its format guide [here](https://messageformat.github.io/messageformat/guide/).

## Installation

```bash
npm i messageformat @ngneat/transloco-messageformat
```

## Usage
The `MessageFormatTranspiler` is compatible with the `DefaultTranspiler` and therefore you can switch without worry that it will break your current translations.

It then enables support for the following within youIt enables support for the following within your i18n translation files:

```json title="en.json"
{
  "mySelectRule": "{myVar, select, val1 {Value 1} val2 {Value 2} other {Other Value}}",
  "myPluralRule": "{myCount, plural, =0 {no results} one {1 result} other {# results}}"
}
```

To enable this plugin, add the following import in your `TranslocoRootModule`:

```ts title="transloco-root.module.ts"
import { TranslocoMessageFormatModule } from '@ngneat/transloco-messageformat';

@NgModule({
  imports: [
    TranslocoMessageFormatModule.forRoot()
  ]
  ...
})
export class TranslocoRootModule {}
```

## Locale initialization

By default, messageformat initializes _all_ locales. You could also provide the locales you will need:

```ts title="transloco-root.module.ts"
@NgModule({
  imports: [
    TranslocoMessageFormatModule.forRoot({
        locales: 'en-GB'
    })
  ],
  ...
})
export class TranslocoRootModule {}
```

The value for `locales` is either a string or an array of strings. The first locale is used as the default locale by messageformat. More info [here](https://messageformat.github.io/messageformat/api/core.messageformat._constructor_/).

## Advanced configuration
MessageFormat instances provides some options to influence its behaviour, among them `customFormatters`, `biDiSupport`, and `strictNumberSign`. Learn about their meaning [here](https://messageformat.github.io/messageformat/api/core.messageformatoptions/)

This is how you would enable bi-directional support and add a custom formatter, for example:
```ts title="transloco-root.module.ts"
 @NgModule({
   imports: [
     TranslocoMessageFormatModule.forRoot({
         biDiSupport: true,
         customFormatters: { upcase: v => v.toUpperCase() }
     })
   ],
   ...
 })
 export class TranslocoRootModule {}
```

## Caching (from v3)
 By default the messageformat compile output is cached to reduce computing times, you can disable caching by passing the `enableCache` option:
 
 ```ts title="transloco-root.module.ts"
 @NgModule({
   imports: [
     TranslocoMessageFormatModule.forRoot({
         enableCache: false,
     })
   ],
   ...
 })
 export class TranslocoRootModule {}
 ``` 
